﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<script runat="server">

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Update multiple rows at once
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    User <span>trigger("suspend")</span> to update multiple rows
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <style type="text/css">
        #Container td
        {
            padding: 8px;
        }
        
        #Container .checkbox, #Container .selectall
        {
            width: 12px;
            height: 12px;
        }
    </style>
    <div id="demo">
        <p>
            Please select itmes and click one button</p>
        <p>
            <input type="button" onclick="addDvd(true)" value="Add DVD" />
            <input type="button" onclick="addDvd(false)" value="Remove DVD" /></p>
        <div class="PaginationContainer">
        </div>
        <br style="clear: both" />
        <div id="Container">
        </div>
        <textarea id="template" style="display: none">
            <table>
                <tr>
                    <th>
                        <input type="checkbox" class="selectall" onclick="selectall()" />
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        DVD Available
                    </th>
                </tr>
                {#foreach $T as d}
                <tr class="{#cycle values=['odd','even']}">
                    <th>
                        <input type="checkbox" class="checkbox" value="{$T.d.Id}" />
                    </th>
                    <td>
                        {$T.d.Name}
                    </td>
                    <td>
                        {$T.d.Dvd.Available ? 'Y' : 'N'}
                    </td>
                </tr>
                {#/for}
            </table>
        </textarea>
        <div class="PaginationContainer">
        </div>
        <br style="clear: both" />
    </div>
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <link rel="stylesheet" href="../css/pagination.css" />
    <script type="text/javascript">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
                ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    $("#Container").dataBind($("#template").text(), data.d, {
                        //show pageination in .PaginationContainer
                        page_container: '.PaginationContainer',
                        empty_text: '<span style="color:Red;">No data in the data source.</span>',
                        page_size: 8,
                        page_animation: 'fadein'
                    });
                }
            });
        });

        function selectall() {
            if ($("#Container .selectall").is(":checked"))
                $("#Container .checkbox").attr("checked", "checked");
            else
                $("#Container .checkbox").removeAttr("checked");
        }

        function addDvd(add) {
            var selected = [];
            $("#Container .checkbox:checked").each(function () {
                selected.push($(this).val());
            });

            //suspend the page change
            $("#Container").trigger("suspend", true);

            //write your code to change the page
            for (var i = 0; i < selected.length; i++) {
                var obj = new Object();
                obj.Id = selected[i];
                obj.Dvd = new Object();
                obj.Dvd.Available = add;
                $("#Container").trigger("update", [obj, { id: 'Id'}]);
            }

            //update the page
            $("#Container").trigger("suspend", false);
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
                ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    $("#Container").dataBind($("#template").text(), data.d, {
                        //show pageination in .PaginationContainer
                        page_container: '.PaginationContainer',
                        empty_text: '<span style="color: Red;">No data in the data source.</span>',
                        page_size: 8,
                        page_animation: 'fadein'
                    });
                }
            });
        });

        function selectall() {
            if ($("#Container .selectall").is(":checked"))
                $("#Container .checkbox").attr("checked", "checked");
            else
                $("#Container .checkbox").removeAttr("checked");
        }

        function addDvd(add) {
            var selected = [];
            $("#Container .checkbox:checked").each(function () {
                selected.push($(this).val());
            });

            //suspend the page change
            $("#Container").trigger("suspend", true);
            
            //write your code to change the page
            for (var i = 0; i < selected.length; i++) {
                var obj = new Object();
                obj.Id = selected[i];
                obj.Dvd = new Object();
                obj.Dvd.Available = add;
                $("#Container").trigger("update", [obj, { id: 'Id'}]);
            }

            //update the page
            $("#Container").trigger("suspend", false);
        }   
</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols">
        &lt;div class=&quot;PaginationContainer&quot;&gt;
        &lt;/div&gt;
        &lt;br style=&quot;clear: both&quot; /&gt;
        &lt;div id=&quot;Container&quot;&gt;
        &lt;/div&gt;
        &lt;textarea id=&quot;template&quot; style=&quot;display: none&quot;&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;th&gt;
                        &lt;input type=&quot;checkbox&quot; class=&quot;selectall&quot; onclick=&quot;selectall()&quot; /&gt;
                    &lt;/th&gt;
                    &lt;th&gt;
                        Name
                    &lt;/th&gt;
                    &lt;th&gt;
                        DVD Available
                    &lt;/th&gt;
                &lt;/tr&gt;
                {#foreach $T as d}
                &lt;tr class=&quot;{#cycle values=[&#39;odd&#39;,&#39;even&#39;]}&quot;&gt;
                    &lt;th&gt;
                        &lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot; value=&quot;{$T.d.Id}&quot; /&gt;
                    &lt;/th&gt;
                    &lt;td&gt;
                        {$T.d.Name}
                    &lt;/td&gt;
                    &lt;td&gt;
                        {$T.d.Dvd.Available ? &#39;Y&#39; : &#39;N&#39;}
                    &lt;/td&gt;
                &lt;/tr&gt;
                {#/for}
            &lt;/table&gt;
        &lt;/textarea&gt;
        &lt;div class=&quot;PaginationContainer&quot;&gt;
        &lt;/div&gt;
        &lt;br style=&quot;clear: both&quot; /&gt;
</pre>
</asp:Content>
